<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
        xmlns:g='urn:import:com.google.gwt.user.client.ui'
        xmlns:pchrc='urn:import:org.dyndns.merelin.pchrc.client'>

    <ui:image field='logo' src='pch.png'/>

    <!-- IE6 cannot handle transparent png, which is what ImageResource creates -->
    <ui:data field='logoIe6Data' src='pch_ie6.gif' />

    <ui:style>
        .statusDiv {
            text-align: right;
            margin: 1em;
        }

        .linksDiv {
            text-align: right;
        }

        @if user.agent ie6 {
            @url logoIe6 logoIe6Data;
            .logo {
                background-image: logoIe6;
                width: 128px;
                height: 51px;
                position: absolute;
            }
        } @else {
            @sprite .logo {
                gwt-image: 'logo';
                position: absolute;
            }
        }
    </ui:style>

    <g:HTMLPanel>
        <div class='{style.logo}'/>

        <div class="{style.statusDiv}">
            <div>
                <b>Welcome back, foo@example.com</b>
            </div>

            <div class='{style.linksDiv}'>
                <g:Button ui:field='selectDeviceLink'>Select Device</g:Button>
                &nbsp;
                <g:Button ui:field='aboutLink'>About</g:Button>
            </div>
        </div>
    </g:HTMLPanel>
</ui:UiBinder>
